<template>
	<div class="container">
    <div class="allheader">
      <h5>来这里了解一手志愿咨询！</h5>
      <h6>一起学习志愿新闻</h6>
      <el-button v-if="$store.state.userInfo.isManagement" @click="deletenews" type="danger"
                 style="position: absolute; right: 1rem; top: 4.5rem;" round>
        删除该资讯
      </el-button>
    </div>
		<div class="center">
			<div class="center-left">
				<div class="news-img"><img :src="newnews.news_cover" /></div>
        <el-tag effect="dark" style="opacity: 0.5;margin: 0.5rem 0 0.5rem 0;">{{ newnews.news_tag }}</el-tag>
				<div v-if="$store.state.islog" class="waibutton">
          <div v-if="isCollected">
            <el-button type="warning" round class="button" @click="canclecollect">取消收藏({{  newnews.news_collect_num}})</el-button>
          </div>
          <div v-else>
            <el-button type="warning" round class="button" @click="addcollect">收藏({{  newnews.news_collect_num}})</el-button>
          </div>

				</div>
			</div>
			<div class="news-news">
				<ul class="probootstrap-news">
					<li>
						<h2>{{ newnews.news_name }}</h2>
						<span class="probootstrap-date">{{ newnews.news_create_time}}</span>
						<p>{{ newnews.news_detail }}</p>

						<p>
							<span>
								<a href=""><i></i></a>
								<a href=""><i></i></a>
							</span>
						</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { request } from '../api/axios.js';
export default {
	name: 'newsdetail',
	data() {
		return {
      // 是否收藏
      isCollected: false,
      newnewscollecter: [],
			index: '',
			newnews: {
				// imgurl:'http://8.136.157.194:8000/media/',
				id: 1,
				news_collect_num: 0,
				news_cover: '',
				news_create_time: '',
				news_detail: '',
				news_initiator_id: 21,
				news_initiator_phone: '',
				news_name: '',
				news_status: '',
				news_tag: ''
			}
		};
	},
	created() {
		//接受传过来的imgid
		console.log(this.$route.query);
		this.index = this.$route.query.index;
		this.getnewsdetail();
	},
	methods: {
		getnewsdetail() {
			// request({
			// 	url: '/v1/activities/activitydetail',
			// 	method: 'post',
			// 	data: {
			// 		id: this.index
			// 	}
			// }).then(res => {
			// 	console.log(res);
			// 	this.newactivity = res.data.data[0];
			// 	console.log(this.newactivity);
			// 	res.data.data.map(item => {
			// 		item.activity_cover = 'http://8.136.157.194:8000/media/' + item.activity_cover;
			// 	});
			// });
			request({
				url: '/v1/news/newsdetail',
				method: 'post',
				data: {
					id: this.index
				}
			}).then(res => {
				this.newnews = res.data.data[0];
        if (res.data.collecter.findIndex(
            item => item.user_name === this.$store.state.userInfo.userName
        ) >= 0) {
          this.isCollected = true
        }
				res.data.data.map(item => {
					item.news_cover = this.$store.state.publicStaticPath + item.news_cover;
				});
			});
		},
    deletenews() {
      request({
        url: '/v1/news/delnews',
        method: 'post',
        data: {
          id: this.newnews.id
        }
      }).then(res => {
        if (res.data.code === 200) {
          alert('删除成功！');
        }
      });
    },
		addcollect() {
			request({
				url: '/v1/news/collectnews',
				method: 'post',
				data: {
					userName: this.$store.state.userInfo.userName,
					id: this.newnews.id
				}
			}).then(res => {
				if (res.data.code === 200) {
					alert(res.data.success);
          this.isCollected = true
					this.newnews.news_collect_num++;
				} else {
					alert('您已经收藏过该资讯！');
					return;
				}
			});
		},
    // 取消收藏
    canclecollect() {
      request({
        url: '/v1/news/canclecollectnews',
        method: 'post',
        data: {
          userName: this.$store.state.userInfo.userName,
          id: this.newnews.id
        }
      }).then(res => {
        if (res.data.code === 200) {
          alert(res.data.success);
          this.isCollected = false
          this.newnews.news_collect_num--;
        } else {
          alert('暂未收藏该资讯！');
          return;
        }
      });
    }
	}
};
</script>

<style scoped>
.container {
	width: 100%;
	margin: auto;
}

.allheader {
  width: 100%;
  height: 8rem;
  background-image: linear-gradient(to bottom, cornflowerblue, lightgreen);
  background-size: cover;
  font-size: 3rem;
  color: black;
  opacity: 0.7;
  padding-left: 3rem;
  padding-top: 1rem;
}
.center {
	margin: 2rem 0 2rem 0; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.center .center-left {
	margin-left: 4rem;
}
.news-news {
	text-align: left;
	width: 55rem;
	margin-right: 2rem;
	display: flex;
	margin: 0rem 1rem 0 3rem; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
}
.news-img img {
	width: 16rem;
	height: 16rem;
}
.probootstrap-news {
	width: 100rem;
	margin-right: 2rem;
	display: flex;
}
.probootstrap-news li {
	list-style: none;
	display: block;
}
.probootstrap-news li p {
	list-style: none;
	color: #637381;
	line-height: 30px;
	font-size: 16px;
	font-weight: 300;
	font-family: Lato, Arial, sans-serif;
}
.probootstrap-news li {
	color: #fdbe34;
	text-decoration: none;
	transition: 0.3s all;
}
.probootstrap-news li .probootstrap-date {
	color: #ccc;
	text-transform: uppercase;
}
.button {
	width: 16rem;
}
</style>
